Tweaks and improvements #2
Conversation
Split css so that styling for the slider is in a separate file Tweaked js to allow an array of options to be passed in if desired
Added support for a width value to be added to the input field Improved layout of options
|
Your examples are broken http://stormtek.github.io/zepto-range/ |
|
Broken in what way? |
|
|
|
it looks fine for me ... |
|
|
|
Try to open on chrome, firefox... I'm using Chrome Version 27.0.1453.110 on Mac. |
|
im using ff on windows and it looks fine |
|
It looks fine in Firefox on Ubuntu 12.10, Firefox on OSX, but you are right ... it breaks on chrome on both OSX and windows ... |
|
So a styling issue with chrome? Does your original demo work on Chrome? |
|
That is weird, I will look into it further. Cos that is a serious issue ... |
|
Thanks for the heads up by the way :) |
|
also crome on android is brøken. it used to work.
|
|
So it it a problem with chrome on almost all platforms ... it does work on firefox on all those platforms though |
|
Looking at the generated html, the wrapper div being created has width being set to 0px when we are grabbing the width automatically rather than taking it from the input field value. So we are not getting the general width from the browser for some reason. That makes it a bug in the javascript. Hopefully that should not be too hard to fix. |
|
@stormtek you are trying to get |
|
That is needed to allow the user to define the width of the slider in the input field. The problem is that if that is not specified then it is returning 0 in Chrome. I think I can fix it fairly easily by dropping to this.input.width() if we get 0 from the existing call. |
|
How do I get that change back to the link we are looking at? |
|
That does fix the problem when I run it locally in Chrome on my macbook though |
|
Ok, may just need to wait a few minutes for testing live. But I do believe that is fixed now. |
|
Yea, that is up and working in Chrome on both osx and windows. |
|
the test seams to work now in chrome om android. it is not supposed to fill
|
|
If there is no wrapper div with a width specified and no width set on the input then it should fill 100%. I have updated the demo to show that with one of the sliders. |
|
beautiful :) you should check description for max parameter. and what does
|
|
I can now confirm that on Android touch is working well for my version in: Chrome, Firefox, Opera Mobile, Dolphin, and the stock Internet browser It is also behaving in Safari on the iOS simulator on my macbook. The slider also behaves in our native iOS app that uses phonegap. |
…uite as nice, now it seems to be behaving ...
…er - whether at init time or at runtime
… end. This allows us to then detect a click on the legend near either end of the slider and move it to the min or max value. This provides better usability for the slider.
… rather than the correct underlying value
…en using on mobile
…ce it has been created. Updated demo to show this in action.
…bottom of slider set value wrong.
We were having some weird scrolling when the element got focus that was fixed by changing this
showFill: allows a user to specify whether or not to show the fill rtl: allows a user to specify whether or not to use an rtl layout on the fill
Added support for an array of values as well as a list of values to be sent to range()
Added support for a width parameter to be set on the input field
Improved handling of layout of slider options
Moved styling for slider to it's own stylesheet to make it easier to use in other projects
Improved readme documentation on how to use the slider